<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        table {
            border: 1px solid gray;
            width: 700px;
            margin: 100px auto;
            border-collapse: collapse;
        }

        thead {
            background-color: cornflowerblue;
            color: white;
            font-weight: bold;
            text-align: center;
            font-size: 20px;
        }

        tbody {
            text-align: center;
            font-size: 25px;
            border: 1px solid gray;
        }

        tbody tr td {
            border: 1px solid gray;
        }
    </style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <td><input type="checkbox" name="checkall">全选</td>
                <td>商品</td>
                <td>商家</td>
                <td>价格</td>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>小米手机</td>
                <td>小米</td>
                <td>¥1999</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>小米手机</td>
                <td>小米</td>
                <td>¥1999</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="item"></td>
                <td>小米手机</td>
                <td>小米</td>
                <td>¥1999</td>
            </tr>
        </tbody>
    </table>

<script>
    let checkall = document.querySelector("input[name='checkall']")
    let itemList = document.querySelectorAll("input[name='item']")
    
    checkall.addEventListener("click", function() {
        itemList.forEach(function(i) {
            i.checked = checkall.checked
        })
    })

    itemList.forEach(function(item) {
        item.addEventListener("click", function() {
            if (this.checked) {
                let checkli = document.querySelectorAll("input[name='item']:checked")
                if (checkli.length == itemList.length) checkall.checked = true
            } else {
                checkall.checked = false
            }
        })
    })
</script>
</body>
</html>